<template>
  <view class="job-orientation">
    <view class="top">
      <view class="title-logo"></view>
      <view class="major-name">就业方向</view>
      <view class="check-more" @click="jumpToJobAll">查看更多></view>
    </view>
    <view class="middle">
      <view class="title">就业率较高的职业</view>
      <view class="position-list">
        <view
          v-for="(item, index) in positionList"
          :key="index"
          class="position-item"
          @click="jumpToPositionDetail(item)"
        >
          {{ item.positionName }}
        </view>
        <view
          class="glass-card"
          v-if="positionList.length < allPositionList.length"
        ></view>
        <view
          class="fold-more"
          v-if="positionList.length < allPositionList.length"
          @click="showAllPositionList"
          >展开更多<view class="avatar"></view>
        </view>
      </view>
      <view class="middle-line"></view>
      <view class="title">就业城市热点分布</view>
      <chart-month
        :chartHeight="560"
        :salaryRegionChart="salaryRegionChart"
        :hideMoneyLogo="true"
      ></chart-month>
    </view>
  </view>
</template>

<script>
import {
  getHotCities,
  getPositions,
  addPositionTopicPoint,
  getPositionTemplate
} from '@/api/modules/career';
import chartMonth from './charts/chartMonth';

export default {
  props: {
    positionTagId: {
      type: String,
      default: ''
    },
    majorName: {
      type: String,
      default: ''
    }
  },
  components: {
    chartMonth,
  },
  created() {
    console.log('this.positionTagId----------------', this.positionTagId);
    this.getPositionsFn();
  },
  mounted() {
    // 这里设置延迟调用 组件异步加载时会导致数据混乱，这个组件在最底部，延迟调用
    setTimeout(() => {
      this.getHotCitysFn();
    }, 500);
  },
  data() {
    return {
      iconUrl: this.$imgBase + 'pcenter/icon1.png',
      salaryRegionChart: {},
      positionList: [],
      allPositionList: [],
      pageName: 'jobOrientation'
    };
  },
  methods: {
    showAllPositionList() {
      this.positionList = this.allPositionList;
    },
    async addPositionTopicPointFn(eventType, dataId) {
      const params = {
        eventType: eventType,
        dataId: dataId,
        personId: uni.getStorageSync('person-id').slice(2) || '0',
        description: '中学生高考点击了职业',
        platform: '1'
      };
      const res = await addPositionTopicPoint(params);
    },
    async jumpToPositionDetail(item) {
      this.addPositionTopicPointFn(2, item.ylPositionId);
      console.log('item', item);
      let params = `positionName=${item.positionName}&positionId=${item.ylPositionId}&pageName=${this.pageName}`;
      //请求接口看是否走新页面
      const templateId = await this.getPositionTemplateFn(item.ylPositionId);
      if (templateId == 6) {
        uni.navigateTo({
          url: `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`
        });
      } else {
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`
        });
      }
      // uni.navigateTo({
      //   url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`,
      // });
    },
    async getPositionTemplateFn(positionId) {
      const res = await getPositionTemplate({ positionId: positionId });
      if (res.code == 200) {
        return res.data.templateId;
      } else {
        return 0;
      }
    },
    async getPositionsFn() {
      const params = {
        positionTagId: this.positionTagId || '10002'
      };
      const res = await getPositions(params);
      if (res.code == 200) {
        this.positionList = res.data;
        this.allPositionList = res.data; // 将完整的专业信息保存起来
        if (this.positionList.length > 12) {
          this.positionList = this.positionList.slice(0, 12);
        }
      }
    },
    PositiveNegative(str) {
      if (str && str != '') {
        if (str[0] != '-') {
          return '+' + str;
        }
      }
      return str;
    },
    jumpToJobAll() {
      console.log('查看更多', this.positionTagId);
      let pageName = 'jobOrientation1';
      let params = {
        positionOrMajor: 1,
        levelNum: 3,
        tagName: this.majorName,
        positionTagId: this.positionTagId,
        pageName,
        advertise: true
      };
      getApp().globalData.allCategoryParams = params;
      // uni.reLaunch({
      //   url: `/pages/career/positionDictionary/allCategory?positionTagId=${this.positionTagId}&fromOrigin=${this.pageName}`,
      // });
      uni.navigateTo({
        url: `/pagesSub/careerGrow/allCategory/allCategory?positionTagId=${this.positionTagId}&fromOrigin=${this.pageName}&extends=true`
      });
    },
    async getHotCitysFn() {
      const params = {
        positionTagId: this.positionTagId || '10002'
      };
      const res = await getHotCities(params);
      if (res.code == 200) {
        console.log('---getHotCitysFn--------->', res);
        let result = {
          dataX: [],
          dataY: []
        };
        res.data.forEach((item) => {
          result.dataX.push(item.xTitle);
          result.dataY.push(Math.floor(item.yValue));
        });
        this.salaryRegionChart = result;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + 'career/';

.job-orientation {
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
  /* padding: 28rpx 24rpx; */
  padding: 28rpx 24rpx 0 24rpx;
  margin-bottom: 20rpx;

  .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    .title-logo {
      width: 8rpx;
      height: 28rpx;
      background: #f75a3e;
      border-radius: 4rpx;
      margin-left: 8rpx;
    }

    .major-name {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      margin-left: 24rpx;
    }

    .check-more {
      position: absolute;
      right: 0;
      font-weight: 400;
      font-size: 26rpx;
      color: #888888;
    }
  }

  .middle {
    margin-top: 24rpx;

    .title {
      font-weight: 800;
      font-size: 32rpx;
      color: #333333;
    }

    .position-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 30rpx;
      position: relative;

      .position-item {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #edf4ff;
        border-radius: 12rpx;
        padding: 14rpx 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        text-align: left;
        font-style: normal;
        height: 96rpx;
        margin-right: 14rpx;
        margin-bottom: 24rpx;
      }

      .glass-card {
        width: 100%;
        height: 70rpx;
        position: absolute;
        bottom: 20rpx;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 100%
        );
      }

      .fold-more {
        width: 100%;
        height: 40rpx;
        position: absolute;
        bottom: -20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;

        .avatar {
          margin-left: 8rpx;
          width: 40rpx;
          height: 40rpx;
          background-image: url($img-base-person + 'positionDictionary/downArrowInBasicInfo.png');
          background-size: 100%;
        }
      }
    }

    .middle-line {
      width: calc(100% - 50rpx);
      margin: 50rpx 24rpx 26rpx 46rpx;
      height: 2rpx;
      background-color: #f4f4f4;
      margin-bottom: 46rpx;
    }

    .salary-data-show {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999999;
      font-size: 26rpx;
      font-weight: 400;
      margin-top: 34rpx;
      padding: 0 44rpx;

      .middle {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 30rpx;

        .blueMoney {
          color: #066bff;
          font-size: 36rpx;
          font-weight: bold;
        }
      }

      .line {
        font-size: 40rpx;
        line-height: 40rpx;
        color: #e5e5e5;
      }

      .echarts-wrap {
        width: 100%;
        margin-top: 12rpx;
      }
    }
  }
}
</style>
